<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="popup-wrap">
    <customHeader middleTitle="周报" @leftCallBack="popupHide" :jsBridgeBack="false" />
    <div class="calendar-week-wrap" v-if="scrollShow">
      <div class="data-wrap">
        <div class="month-wrap" v-for="(item,ii) in dateList" :key="ii" v-show="item.weeks.length">
          <div class="month">{{item.month}}月</div>
          <ul class="week-list">
            <li
              v-for="(week,index) in item.weeks"
              :key="index"
              @click="handleSelect(item.year,item.month,week.week,week.day,[ii,index])"
            >
              <div class="week">第{{week.week}}周</div>
              <div class="day">{{week.day}}</div>
              <div class="money">¥{{getMoney(item.year,item.month,week.week)}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </mt-popup>
</template>
<script>
import Vue from "vue";
import moment from "moment";
import customHeader from "../../components/header/header";
export default {
  name: "calendarKeek",
  data() {
    return {
      scrollShow:false,
      popupVisible: false,
      dateList: [],
      moneyList: []
    };
  },
  methods: {
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    getMoney(year, month, week) {
      let money = "0.00";
      if (month < 10) {
        month = "0" + month;
      }
      let d = "" + year + month + week;
      this.moneyList.map((item) => {
        if (item.bizDate == d) {
          money = item.payAmt;
        }
      });
      return money;
    },
    getWeeks(year, month) {
      var d = new Date();
      // 该月第一天
      d.setFullYear(year, month - 1, 1);
      var w1 = d.getDay();
      if (w1 == 0) w1 = 7;
      // 该月天数
      d.setFullYear(year, month, 0);
      var dd = d.getDate();
      // 第一个周一
      let d1;
      if (w1 != 1) d1 = 7 - w1 + 2;
      else d1 = 1;
      let week_count = Math.ceil((dd - d1 + 1) / 7);

      let weeks = [];
      if (new Date().getMonth() + 1 == month) {
        week_count = this.getCurrentWeekIndex();
      }
      for (let i = 1; i <= week_count; i++) {
        weeks.push({ week: i, day: this.getWeekTime(year, month, i) });
      }
      return weeks;
    },
    getWeekTime(year, month, weekday) {
      var d = new Date();
      // 该月第一天
      d.setFullYear(year, month - 1, 1);
      var w1 = d.getDay();
      if (w1 == 0) w1 = 7;
      // 该月天数
      d.setFullYear(year, month, 0);
      var dd = d.getDate();
      // 第一个周一
      let d1;
      if (w1 != 1) d1 = 7 - w1 + 2;
      else d1 = 1;
      var monday = d1 + (weekday - 1) * 7;
      var sunday = monday + 6;
      var from = month + "." + monday;
      var to;
      if (sunday <= dd) {
        to = month + "." + sunday;
      } else {
        d.setFullYear(year, month - 1, sunday);
        let days = d.getDate();
        to = (d.getMonth() + 1) + "." + days;
      }
      return from + "-" + to;
    },

    //现在是当月第几周
    getCurrentWeekIndex() {
      let curr = new Date();
      // 先计算出该日期为第几周
      let week = Math.ceil(curr.getDate() / 7);
      // 判断这个月第一天，如果不是周一，则减去一周
      let mfw = new Date(moment().startOf('month').valueOf()).getDay();
      if (mfw !== 1&&curr.getDay()!==1) {
        week = week - 1;
      }
      return week;
    },

    generate() {
      var cur = new Date();
      var m = cur.getMonth() + 1;
      var y = cur.getFullYear();
      for (let i = m - 6 + 1; i <= m; i++) {
        let year = i <= 0 ? y - 1 : y;
        let month = i <= 0 ? i + 12 : i;
        this.dateList.push({ year: year, month: month, weeks: this.getWeeks(year, month) });
      }
      this.$emit("rangeMin", { reportType: "week", value: this.dateList });
    },
    handleSelect(year, month, week, day, index) {
      let dayArr = day.split("-");
      const start = new Date(`${year}/${dayArr[0].split(".")[0]}/${dayArr[0].split(".")[1]}`);
      const end = new Date(`${year}/${dayArr[1].split(".")[0]}/${dayArr[1].split(".")[1]}`);
      this.$emit("reportSelect", { reportType: "week", dateLabel: `${year}年${month}月 第${week}周 ${day}`, dateScope: { startDate: start.getTime(), endDate: end.getTime() }, index: index });
      this.popupHide();
    },
    reqData(startDate, endDate) {
      // 分类型查询:1、按月查询每天数据；2，按月查询每周数据；3：按年查询每月数据
      const param = { type: 2, startDate: startDate, endDate: endDate };
      this.ajax({
        url: "/newapp/statistics/queryTradeDaysSummaryList.do",
        type: "post",
        data: param
      })
        .then(result => {
          if (result.success) {
            this.moneyList = result.resultObject;
          } else {
            Toast(result.msg);
          }
        })
        .catch(function (err) {

        });
    },

  },
  mounted () {
      this.generate();
  },
  watch: {
    popupVisible(v) {
      if (v && this.moneyList.length === 0) {
        const cur = new Date();
        let sm = new Date(moment().subtract(6, 'months'));
        let s = new Date(`${sm.getFullYear()}/${sm.getMonth() + 1}/1`).getTime();
        this.reqData(s, cur.getTime());
      }
      if(v){
        setTimeout(() => {
          this.scrollShow = true;
        }, 100);
      }
    }
  },
  components: {
    customHeader
  },
};
</script>
<style lang='scss'>
@import "calendar";
</style>
